<!--
 * @Author: chunlai
 * @Date: 2023-12-15 15:03:17
 * @LastEditTime: 2025-11-27 08:58:53
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\views\form\components\InsurePlanModule.vue
 * @Description: 险种选择模块
-->
<template>
  <div class="insuPlan">
    <div class="cellItem">
      <div class="insuName">
        <span class="zhu-icon" v-if="insuData.ismain">主</span>
        <span class="fu-icon" :class="{ disabled: insuData.canChoose }" v-else>
          附
        </span>
        <div class="proname">{{ insuData.productName }}</div>
      </div>
      <div class="checkBox" v-if="!insuData.ismain && !insuData.mustChecked">
        <van-checkbox
          :value="insuData.checked"
          checked-color="#D44438"
          :disabled="insuData.canChoose"
          @click="changeChecked(insuData)"
        ></van-checkbox>
      </div>
    </div>
    <div class="sb_tips" v-if="insuData.errorTip">
      {{ insuData.errorTip }}
    </div>
    <template
      v-if="insuData.checked || insuData.ismain || insuData.mustChecked"
    >
      <!-- 投保方案-1 -->
      <div class="cell3_main" v-if="insuData.programmeName">
        <div class="cell3Item">
          <div class="cell3_label">投保方案</div>
          <div class="cell3_value">
            <div class="txt_check">
              {{ insuData.programmeName }}
            </div>
          </div>
        </div>
      </div>
      <!-- 起保日期-1 -->
      <div class="cell3_main" v-if="insuData.beginInsurDate">
        <div class="cell3Item">
          <div class="cell3_label">起保日期</div>
          <div class="cell3_value">
            {{ setStartDate() }}
          </div>
        </div>
      </div>
      <!-- 计划选择(常规+大类选择) -->
      <div class="cell3_main" v-if="insuData.plansList">
        <div class="cell4Item">
          <div class="flex_ac cell4_label">
            计划选择
            <!-- <FieldDescMode
              :label="insuData.planDescLabel"
              :desc="insuData.planDescCont"
              v-if="insuData.planDescCont"
            /> -->
          </div>
          <div class="cell4_value mt6" v-if="insuData.planBiggerList">
            <MsRadio
              :curVal="insuData.planBig"
              :arrList="insuData.planBiggerList"
              btnType="planBig"
              flexName="gap"
              @clickEvent="changeMsRadio"
            />
          </div>
          <div class="cell4_value mt6">
            <MsRadio
              :curVal="insuData.planCode"
              :arrList="insuData.plansList"
              btnType="planCode"
              flexName="gap"
              @clickEvent="changeMsRadio"
            />
          </div>
          <div class="mt6" v-if="insuData.planDescCont">
            <div class="ftc13 ft12" v-html="insuData.planDescCont"></div>
          </div>
        </div>
      </div>
      <!-- 交费期间-1 -->
      <div
        class="cell3_main"
        v-if="!insuData.hidePayYearList && insuData.payendyear"
      >
        <div class="cell3Item">
          <div class="cell3_label">交费期间</div>
          <div class="cell3_value">
            <MsRadio
              v-if="
                insuData.payendyearList && insuData.payendyearList.length > 0
              "
              :curVal="insuData.payendyear"
              btnType="payendyear"
              :arrList="insuData.payendyearList"
              @clickEvent="changeMsRadio"
            />
            <div class="txt_check" v-else>
              {{ insuData.payendyear | payendYearName }}
            </div>
          </div>
        </div>
      </div>
      <!-- 保险期间-1 -->
      <div
        class="cell3_main"
        v-if="!insuData.hideInsuYear && insuData.insuYear"
      >
        <div class="cell3Item">
          <div class="cell3_label">保险期间</div>
          <div class="cell3_value">
            <MsRadio
              :curVal="insuData.insuYear"
              :arrList="insuData.insureYearList"
              btnType="insuYear"
              @change="changeMsRadio"
              v-if="
                insuData.insureYearList && insuData.insureYearList.length > 0
              "
            />
            <div class="txt_check" v-else>
              {{ insuData.insuYear | insureYearName(insuData.insuYearType) }}
            </div>
          </div>
        </div>
      </div>
      <!-- 保额(显示:1,规则:0)-1 -->
      <div
        class="cell3_main"
        v-if="insuData.amnt !== undefined && !insuData.blankAmnt"
      >
        <div class="cell3Item">
          <div class="cell3_label">
            基本保额
            <FieldDescMode
              label="基本保险金额"
              :desc="insuData.amntDesc"
              v-if="insuData.amntDesc"
            />
          </div>
          <div class="cell3_value">
            <MsRadio
              :riskItem="insuData"
              :curVal="insuData.amnt"
              :arrList="insuData.amntList"
              btnType="amnt"
              @clickEvent="changeMsRadio"
              v-if="insuData.amntType == 'arr'"
            />
            <div
              class="txt_check to_text"
              v-else-if="insuData.amntType == 'text'"
            >
              {{ insuData.amnt }}<i>元</i>
            </div>
            <div class="flex-lr infoCon amnt-f-end" v-else>
              <input
                type="number"
                class="baofei"
                v-model="insuData.amnt"
                @blur="changDatas('amnt', $event.target.value)"
              />元
              <span class="edit_icon_base pas"></span>
            </div>
          </div>
        </div>
      </div>
      <!-- 保费(显示:1,规则:0)-1 -->
      <div
        class="cell3_main"
        v-if="insuData.prem !== undefined && !insuData.blankPrem"
      >
        <div class="cell3Item">
          <div class="cell3_label">
            首年保费
            <FieldDescMode
              label="首年保费"
              :desc="insuData.premDesc"
              v-if="insuData.premDesc"
            />
          </div>
          <div class="cell3_value">
            <div class="txt_check to_text" v-if="insuData.premType == 'text'">
              {{ insuData.prem || "0" }}<i>元</i>
            </div>
            <div class="flex-lr infoCon amnt-f-end" v-else>
              <input
                type="number"
                class="baofei"
                v-model="insuData.prem"
                @blur="changDatas('prem', $event.target.value)"
              />元
              <span class="edit_icon_base pas"></span>
            </div>
          </div>
        </div>
      </div>
      <!-- 附加保障责任-通用 -->
      <div class="cell3_main" v-if="insuData.showLiabilities">
        <div class="cell4Item">
          <div class="addi_dutys">
            {{ insuData.dutyTitle || "附加保障责任(可多选)" }}
          </div>
          <div class="cell4_value">
            <dutyPlanList
              :dutyList="insuData.dutyPlanList"
              :insuData="insuData"
              v-if="insuData.dutyPlanList && insuData.dutyPlanList.length > 0"
            ></dutyPlanList>
            <LiabilityList2As
              :dutyList="insuData.addiDutyList"
              :insuData="insuData"
              v-else-if="
                insuData.addiDutyList && insuData.addiDutyList.length > 0
              "
            ></LiabilityList2As>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import LiabilityList2As from "./premcount/LiabilityList2As";
import dutyPlanList from "./premcount/dutyPlanList";
import FieldDescMode from "./premcount/FieldDescMode";
import { getStartDate } from "@/methods/date.js";
export default {
  name: "InsurePlanModule",
  components: {
    LiabilityList2As,
    dutyPlanList,
    FieldDescMode,
  },
  props: {
    insuData: {
      default: () => {},
    },
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      mainInsu: "risks/mainInsu",
      beginInsDay: "page/beginInsDay",
    }),
  },
  created() {},
  mounted() {},
  methods: {
    setStartDate() {
      if (this.beginInsDay && this.beginInsDay !== 0) {
        return getStartDate(this.beginInsDay);
      } else {
        return "";
      }
    },
    changeChecked(insuData) {
      if (insuData.canChoose) {
        let errBy = "请尝试选择其他险种";
        if (insuData.limitedBy !== void 0) {
          if (insuData.limitedBy === "tbr") {
            errBy = "请确认投保人信息";
          } else if (insuData.limitedBy === "bbr") {
            errBy = "请确认被保险人信息";
          }
        }
        return this.$toast(`${insuData.errorTip}，${errBy}`);
      }
      this.changDatas("checked", !insuData.checked);
    },
    changeMsRadio(item, type) {
      this.changDatas(type, item.value);
    },
    changDatas(type, val) {
      // 领取频次须与主险一致
      if (
        type === "pullMethod" &&
        this.insuData.pullMethodRela === "mainSame"
      ) {
        if (this.mainInsu[0].pullMethod && this.mainInsu[0].pullMethod != val) {
          this.$toast(`${this.insuData.productName}领取频次须与主险一致。`);
          return;
        }
      }
      // console.log(type, val);
      this.$store.dispatch("risks/setRisks", {
        varietyCode: this.insuData.varietyCode,
        type: type,
        val: val,
      });
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="less" scoped>
.proname {
  line-height: 20px;
  font-family: MiSans;
}
.insuPlan {
  background-color: #fff;

  &:not(:first-child) {
    border-top: 1px solid #f6f6f6;
  }

  .cellItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    padding-top: 15px;
    margin-bottom: 5px;
  }

  .insuName {
    width: 100%;
    font-size: 16px;
    line-height: 1.3;
    position: relative;
    padding-left: 20px;

    .zhu-icon,
    .fu-icon {
      position: absolute;
      top: 1px;
      left: 0;
      width: 18px;
      height: 18px;
      line-height: 18px;
      font-size: 12px;
      text-align: center;
      color: #ffffff;
      border-radius: 0px 4px 4px 4px;
    }

    .zhu-icon {
      background: rgba(245, 64, 64, 1);
    }

    .fu-icon {
      background: rgba(255, 141, 26, 1);

      &.disabled {
        background: rgba(166, 166, 166, 1);
      }
    }
  }

  .checkBox {
    flex-shrink: 0;
  }
  .baofei {
    width: 100%;
    color: #000;
    border: none;
    text-align: right;
    padding-right: 3px;
  }
}

.infoCon {
  min-height: 30px;
  line-height: 30px;
  padding: 0 15px 0 10px;
  position: relative;
}
.sb_tips {
  color: #d9261d;
  font-size: 12px;
  line-height: 15px;
  padding-left: 12px;
}

.cell3_main {
  padding: 0 12px;
}
.cell3Item {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  min-height: 40px;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #ededed;
    transform: scaleY(0.5);
  }

  .cell3_label {
    display: flex;
    width: 80px;
    line-height: 30px;
    color: #747474;
  }

  .cell3_value {
    display: flex;
    justify-content: flex-end;
    width: calc(100% - 90px);
  }
  .cell2_value {
    width: calc(100% - 90px);
  }
}
.cell4Item {
  padding: 7px 0;
  min-height: 40px;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #ededed;
    transform: scaleY(0.5);
  }
  .cell4_label {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 20px;
    color: #747474;
  }

  .cell4_value {
    width: 100%;
  }
}
.addi_dutys {
  font-size: 15px;
  font-weight: 600;
  line-height: 30px;
  color: #333;
}
.txt_check {
  min-width: 64px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 0 10px;
  border-radius: 2px;
  color: #f54040;
  background: #fff0f0;
  position: relative;
  &::after {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    border: 1px solid #f54040;
  }
  &.to_text {
    padding: 0;
    color: #1b1b1b;
    background: #fff;
    text-align: right;
    i {
      margin-left: 5px;
    }
    &::after {
      display: none;
    }
  }
}
.text_desc {
  color: #1b1b1b;
  text-align: right;
}
/deep/.van-stepper__minus,
.van-stepper__plus {
  width: 30px;
  height: 26px;
}
</style>
